<template>
  <div>
    <van-sticky>
      <van-nav-bar title="记录仪" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="thirdclassWrap">
      <div class="thirdclassTop">记录仪,记录您和家人的健康</div>
      <h2>进行中</h2>
    </div>
    <div class="thirdclassBox">
      <div>您还未预约任何服务 ~<span>去问诊</span></div>
    </div>
    <div class="thirdclassBox1">
      <div>
        <img src="https://kano.guahao.com/hq0480489733?webp=80" alt="" />
        <p>我的医生</p>
      </div>
      <div>
        <img src="https://kano.guahao.com/wag480494165?webp=80" alt="" />
        <p>我的处方</p>
      </div>
      <div>
        <img src="https://kano.guahao.com/PO4480859857?webp=80" alt="" />
        <p>购买记录</p>
      </div>
      <div>
        <img src="https://kano.guahao.com/5x7480491703?webp=80" alt="" />
        <p>体检报告</p>
      </div>
    </div>
    <div class="thirdclassBox2">
      <p class="text1">您的专属健康会员</p>
      <p class="text2">24万医院资源</p>
    </div>
    <div class="thirdclassBox3">
      <h2>健康记录</h2>
      <img src="https://kano.guahao.com/p4t486695458?webp=80" alt="" />
      <span>+新建记录</span>
    </div>
    <div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </div>
    <div class="create-time">
      <div class="list-item">
        <p class="circle"></p>
        <p class="text">{{ time }}</p>
      </div>
      <div class="tip-title">开启我的专属记录，让健康“有迹可循”</div>
      <div class="tip-text">
        您可以拍下药品单、体检报告单,<br />
        也可以记录线下门诊病历
      </div>
    </div>
    <div class="tip-add-btn">马上添加</div>
    <div class="tip-question-wrap">
      <span>了解详情></span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const time = ref();
let currentDate = new Date();
let year = currentDate.getFullYear();
let month = currentDate.getMonth() + 1; // 月份是从0开始计数的，所以要加1
let day = currentDate.getDate();
console.log(year, month, day);

time.value = `${year}-${month}-${day}`;
console.log(time.value);

const value1 = ref(0);
const value2 = ref("a");
const option1 = [
  { text: "全部商品", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 },
];
const option2 = [
  { text: "默认排序", value: "a" },
  { text: "好评排序", value: "b" },
  { text: "销量排序", value: "c" },
];
const onClickLeft = () => history.back();
</script>

<style scoped lang="scss">
.thirdclassWrap {
  background-color: #e8effd;
  background: linear-gradient(rgba(#ebf3ff, 0.636), rgba(#f3f7ff, 0.625));
  width: 89.44%;
  height: 1.1rem;
  padding: 0.2rem;
}
.thirdclassWrap h2 {
  line-height: 0.6rem;
}
.thirdclassTop {
  padding-top: 0.2rem;
  width: 88%;
  border-radius: 0.1rem;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #fff;
  padding: 0.2rem;
}
.thirdclassTop h3 {
  padding-left: 0.2rem;
}
.thirdclassBox {
  padding: 0.2rem;
  position: relative;
}
.thirdclassBox div {
  padding: 0.2rem;
  border: 1px solid #eff0f2;
  border-radius: 0.1rem;
  position: relative;
  color: #5e616b;
}
.thirdclassBox span {
  position: absolute;
  right: 0.2rem;
  bottom: 0.1rem;
  line-height: 0.35rem;
  width: 0.75rem;
  font-weight: 600;
  text-align: center;
  height: 0.35rem;
  border: 1px solid #3f86ff;
  border-radius: 2rem;
  color: #3f86ff;
}
.thirdclassBox1 {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  display: flex;
  justify-content: space-evenly;
}
.thirdclassBox1 div {
  width: 20%;
  height: 0.7rem;
  text-align: center;
}
.thirdclassBox1 div img {
  width: 60%;
  height: 0.4rem;
}

.thirdclassBox1 span {
  width: 0.5rem;
  height: 0.5rem;
  color: #fff;
  text-align: center;
  line-height: 0.5rem;
}
.thirdclassBox2 {
  width: 89%;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  height: 0.5rem;
  background: url(https://kano.guahao.com/WVR480859832) no-repeat 50%;
  background-size: cover;
  background-position: center;
  margin-top: 0.1rem;
}
.thirdclassBox2 .text1 {
  display: inline-block;
  line-height: 0.5rem;
  font-weight: 700;
  padding-left: 0.1rem;
}
.thirdclassBox2 .text2 {
  display: inline-block;
  font-size: 0.14rem;
  padding-left: 0.1rem;
}
.thirdclassBox3 {
  margin-left: 0.2rem;
  line-height: 0.7rem;
  position: relative;
  width: 89%;
}
.thirdclassBox3 img {
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  left: 1.1rem;
  bottom: 0.25rem;
}
.thirdclassBox3 span {
  position: absolute;
  right: 0;
  bottom: 0.2rem;
  width: 1rem;
  text-align: center;
  line-height: 0.3rem;
  height: 0.3rem;
  font-weight: 700;
  border-radius: 2rem;
  background-color: #3f86ff;
  color: #fff;
}
.create-time {
  width: 89%;
  height: 1.8rem;
  margin-top: 0.2rem;
  margin-left: 0.2rem;
  border-left: 1px solid #ccc;
}
.list-item {
  position: relative;
  width: 100%;
  height: 0.3rem;
}
.circle {
  position: absolute;
  left: -0.05rem;
  top: 0.1rem;
  width: 0.1rem;
  height: 0.1rem;
  background-color: blue;
  border-radius: 50%;
  display: inline-block;
}
.text {
  background: #e3eeff;
  border-radius: 0.2rem;
  color: #3f86ff;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-size: 0.12rem;
  font-weight: 700;
  height: 0.3rem;
  line-height: 0.3rem;
  margin-left: 0.2rem;
  text-align: center;
  width: 1rem;
}
.tip-title {
  font-size: 0.16rem;
  font-weight: 700;
  line-height: 0.5rem;
  margin-bottom: 0.2rem;
  margin-left: 0.4rem;
}
.tip-text {
  color: #5e616b;
  font-family: PingFangSC, PingFangSC-Regular;
  font-size: 0.14rem;
  font-weight: 400;
  line-height: 0.2rem;
  margin-left: 0.7rem;
  padding-bottom: 0.2rem;
  text-align: left;
}
.tip-add-btn {
  background: #3f86ff;
  border-radius: 0.2rem;
  color: #fff;
  font-family: PingFangSC, PingFangSC-Regular;
  font-size: 0.16rem;
  height: 0.4rem;
  line-height: 0.4rem;
  margin-left: 0.9rem;
  margin-top: -0.23rem;
  text-align: center;
  width: 2rem;
}
.tip-question-wrap {
  width: 100%;
  height: 1rem;
  text-align: center;
}
.tip-question-wrap span {
  line-height: 0.5rem;
  font-size: 0.15rem;
  font-weight: 700;
  color: #3f86ff;
}
</style>